<style>
    /*订单显示*/
    .item{ width:270px; height:135px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
    .item .tags{width:20px;float:left;text-align:center;}
    .item .pic{width:100px; float:left;text-align:center;}
    .item .pic img{max-width:100px; max-height:135px;border-radius:5px;}
    .item .text{width: 150px;text-align:left;float: right;}
    .active{border: 1px solid #658ced;background-color: #f2f2f2;}
    .text-item{width: 100%;}
    .clear{clear:both;}
    .layui-btn-small {
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        font-size: 12px;
    }
    .small-table{margin: 0; }
    .small-table td{padding: 4px;font-size: 10px}
</style>
<div class="fixed-bar">
    <form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search-optable" >
        <div class="layui-form-item">
            <div class="layui-inline ">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="client_ordernum" value="{$client_ordernum}" lay-verify="" placeholder="输入订单号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">SKU</label>
                <div class="layui-input-inline">
                    <input type="text" name="sku" value="{$sku}" lay-verify="" placeholder="输入SKU" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    {:Form::select('status_temp', '', [0 => '所有状态', 1=>'车缝中', 2=>'预警', 3=>'已超期'], '', '')}
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">下单日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_date_range" readonly="" id="create_date_range" lay-verify="" placeholder="选择下单日期" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">出货日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="shipment_date_range" readonly="" id="shipment_date_range" lay-verify="" placeholder="选择出货日期" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">回货日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="outgotail_return_date_range" readonly="" id="outgotail_return_date_range" lay-verify="" placeholder="选择回货日期" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">外协时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="time_send_2_range" readonly="" id="time_send_2_range" lay-verify="" placeholder="选择出货日期" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">耗时天数</label>
                <div class="layui-input-inline">
                    {:Form::select('consume_day', '', [0 => '请选择',1=>'1天内',  2=>'1天', 3=>'2天', 4=>'3天', 5=>'4天', 104=>'4天以上'], '', '')}
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">委外工厂</label>
                <div class="layui-input-inline" id="factory_all" style="width: auto;min-width: 250px;">
                </div>
            </div>
            <div class=" layui-inline layui-upload">
                <button type="submit" class="layui-btn"  lay-submit="" lay-filter="demo1"  >搜索</button>
            </div>
        </div>
    </form>
</div>

{include file="mp@out_node_progress/menu" /}

<div class="layui-collapse">
    <div class="layui-colla-item caigou">
        <h2 class="layui-colla-title" id="vue_tab_content">&nbsp;&nbsp;&nbsp;{{ status_sum }}</h2>
        <div id="view" class="layui-colla-content layui-show">
        </div>
    </div>
</div>

<script id="tpl" type="text/html">

    {{#  layui.each(d, function(kkk, vvv){ }}

    <div class="item layui-anim layui-anim-scaleSpring actionSendDeliver" data-option="{{ vvv.client_ordernum }}" >
        <a>
            <div class="pic">
                <img src="{{ vvv.pic_res }}"
                     class="lay-pic">
            </div>
        </a>
        <div class="text">
            <a>
                <div class="text-item"> 出货时间：{{ vvv.shipment_time }}&nbsp;
<!--                    <span>-->
<!--                <i id="tips{{vvv.client_ordernum}}"  onmouseover="showDiv('tips{{vvv.client_ordernum}}', '设置回货日期')"-->
<!--                   class="layui-icon layui-icon-tips workshop-set-overtime" style="color: #1E9FFF;"-->
<!--                   data-option="{{vvv.client_ordernum}}" data-chejian_plan_over_time="{{ vvv.outgotail_return_time }}"-->
<!--                ></i>-->
<!--                    <span> </span>-->
<!--                </span>-->
                </div>
                {{# switch(vvv['status_txt']){
                case '已超期':
                }}
                <span class="red" id="status_txt{{vvv.client_ordernum}}"  onmouseover="showDiv('status_txt{{vvv.client_ordernum}}', '电话提示：{{ vvv.mobile }}')" >{{ vvv.status_txt }}&nbsp;</span>
                {{# break;
                case '预警':
                }}
                <span class="orange" id="status_txt{{vvv.client_ordernum}}"  onmouseover="showDiv('status_txt{{vvv.client_ordernum}}', '电话提示：{{ vvv.mobile }}')" >{{ vvv.status_txt }}&nbsp;</span>

                {{# break;
                case '车缝中':
                }}
                <span class="black" id="status_txt{{vvv.client_ordernum}}"  onmouseover="showDiv('status_txt{{vvv.client_ordernum}}', '电话提示：{{ vvv.mobile }}')" >{{ vvv.status_txt }}&nbsp;</span>

                {{# break; } }}
                （耗时{{ vvv.consume_day }}天）</br>
                <span class="copy-item blue">{{ vvv.client_ordernum }}</span>&nbsp;&nbsp; <span class="layui-btn layui-btn-small layui-btn-warm">{{ vvv.type_txt }}</span><br>
                <span class="copy-item blue">{{ vvv.sku }}</span></br>
                <span class="blue" id="getOrderDetail-{{vvv.id}}" onmouseover="getOrderDetail({{vvv.id}})" >{{ vvv.quantity }}</span>&nbsp;件
                &nbsp;<br>
            </a>
            <div class="text-item">
                <a title="{{ vvv.ft_name }}/{{ vvv.g_name }}"> <span style="float:left" >{{ vvv.g_name }}</span> </a>

                <a> </a>
            </div>
            <a> </a>
        </div>
        <a> </a>
    </div>

    {{#  }); }}

    <div class="clear"></div>
</script>

<script id="onclickSewingTpl" type="text/html">
    <div class="layui-form-item pt20 pl20 layui-form">
        <form class="layui-form"  action="{:url('mp/OutNodeProgress/confirmReturnGoods')}"   id="form33" >
            {{#  layui.each(d.data, function(kkk, vvv){ }}
            <h2 class="layui-colla-title">订单{{ vvv.client_ordernum}}，外发数：{{ vvv.after_num}}件 </h2>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width:60px;">回货总数</label>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="text" class=" layui-input" name="sew_return_goods_num[]" data-option="{{ vvv.after_num}}" onchange="return_goods_num_edit(this)" style="width:80px;"  value="" autocomplete="off" placeholder="请输入数量" lay-verify="number">
                </div>
                <label class="layui-form-label" style="width:60px;">欠数</label>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="text" class=" layui-input" style="width:80px;"  name="sew_owe[]" value="" autocomplete="off" placeholder="请输入数量" readonly lay-verify="number">
                </div>
                <label class="layui-form-label" style="width:60px;">是否退料</label>
                <div class="layui-input-inline" style="width: 80px;">
                    <select name="sew_return_material_flag[]"  class="mimo-select group-id" style="width:80px;" lay-ignore="">
                        <option value="0" selected="">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
            </div>
            {{# }); }}
            <div class="layui-inline fr" style="margin: 20px 20px;">
                <input type="hidden"  name="client_ordernum_all" value="{{ d.client_ordernum_all }}">
                <button type="button" class="layui-btn layui-btn-normal" id="submitSewingform">确定</button>
                <a href="javascript:layui.layer.closeAll();" class="layui-btn layui-btn-primary ml10">取消</a>
            </div>
        </form>
    </div>
</script>
<div id="overTimeTpl" class="hide">
    <div id="overTimeControl"></div>
</div>
{include file="system@block/layui" /}
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/vue@3.2.26/dist/vue.global.js"></script>
<script type="text/javascript">
    var res_data={};//所有数据集
    var txt_data={};
    var send_stock={};
    var factoryAll= JSON.parse('{:json_encode($factoryAll)}');
    //#vue_tab_content
    const allContent = {
        data() {
            return {
                status_sum:''
            }
        }
    }
    const vm=Vue.createApp(allContent).mount('#vue_tab_content');
    layui.use([ 'element', 'layer', 'laytpl', 'tool','laydate','table','form','flow'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var laytpl = layui.laytpl,laydate=layui.laydate ,table = layui.table;
        var flow = layui.flow;
        window.showDiv = function(id, msg) {
            tip_index_show=layer.tips("<span>"+msg+"</span>",
                "#"+id+"",
                {tips:[1, '#4794ec']});
            $("#"+id+"").mouseleave(function(){
                layer.close(tip_index_show);
            });
        }

        laydate.render({
            elem: '#date_edit'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#date_edit').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });

        laydate.render({
            elem: '#create_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#create_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });
        laydate.render({
            elem: '#shipment_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#shipment_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });
        laydate.render({
            elem: '#time_send_2_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#time_send_2_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });
        laydate.render({
            elem: '#outgotail_return_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#outgotail_return_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });

        form.on('submit(demo1)', function (data) {
            layui.jquery('#view').html('');
            layui.jquery('#view').unbind();//重置page数
            send_stock={};//清空选择的订单项
            flowload( data.field);
            return false;
        });

        function flowload(formData=[]){
            flow.load({
                elem: '#view' //流加载容器
                //滚动条所在元素，一般不用填，此处只是演示需要。
                ,done: function(page, next){ //执行下一页的回调
                    console.log(page)
                    var lis = [];
                    var url = "{:url('mp/OutNodeProgress/outgoTail')}"+"?page="+page
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: formData,
                        dataType:"json",
                        success: function(res){
                            if($.isEmptyObject(res.data) == false){
                                txt_data=res.txt;
                                res_data=$.extend(res_data, res.data);
                                var Tpl = $('#tpl').html();
                                laytpl(Tpl).render(res.data, function(html){
                                    lis.push(html);
                                    next(lis.join(''), page <= res.pageInfo.maxPage);
                                });
                                $('.layui-flow-more').find('a').trigger('click');
                            } else {
                                $('#view').find('div.layui-flow-more').html('<a href="javascript:;">没数据了</a>');
                                lis.push('暂无数据');
                            }
                            //状态统计信息显示
                            status_sum(res,page);
                            if(res.code==10001){
                                location.href=res.url;
                            }
                            //去除多余的div clear
                            if(layui.jquery('#view').find('div.clear').length>=2){
                                layui.jquery('#view').find('div.clear')[0].remove();
                            }
                            element.init();
                        }
                    });
                }
            });

        }
        flowload($('#hisi-table-search-optable').serialize());

        // 选择订单
        $(document).on('click','.actionSendDeliver',function(){
            if($(this).hasClass('active')){
                $(this).removeClass('active');
                for ( var key in send_stock ){
                    if( send_stock[$(this).attr('data-option')]==1){
                        delete send_stock[$(this).attr('data-option')];
                        break;
                    }
                }
            }else{
                $(this).addClass('active');
                send_stock[$(this).attr('data-option')] = 1;
            }
        });
        //弹出确认回货窗
        layui.jquery('.onclickSewing').unbind();
        $(document).on('click','.onclickSewing',function(e){
            e.stopPropagation();
            var client_ordernum_all=[];
            $.each(send_stock ,function (k,v)   {
                client_ordernum_all.push(k);
            });

            var data=[];
            $.each(send_stock ,function (k,v)   {
                $.each(res_data ,function (k2,v2)  {
                    if(v2.client_ordernum==k){
                        data.push(v2);
                        return ;
                    }
                })
            });
            var content = laytpl($('#onclickSewingTpl').html()).render({data:data,client_ordernum_all:client_ordernum_all.toString()});
            layerDefective = layer.open({
                type: 1
                ,area: ['660px','auto']
                ,offset: '100px'
                ,anim: parseInt(Math.random()*(6+1),10)
                ,skin:'layui-layer-molv'
                ,title:'录入回货数量'
                ,content: content
            });
        });
        //确定提交回货表单
        $(document).on('click','#submitSewingform',function(e){
            e.stopPropagation();
            $.ajax({
                type: "POST",
                url: "{:url('mp/OutNodeProgress/confirmReturnGoods')}"+"?type_name=outgoTail",
                data: $('#form33').serialize() ,
                dataType:"json",
                success: function(res){
                    if (res.code == 1) {
                        window.location.reload();
                    } else {
                        layer.msg(res.msg, {icon: 2,anim: 6});
                    }
                }
            });
            return false;
        });

        //尺码细数
        window.showQuantityDetail = function(order_id,type='order_count') {
            $.ajax({
                type: "POST",
                url: "{:url('mp/OutNodeProgress/getQuantityDetail')}?order_id="+order_id+"&type="+type,
                dataType:"json",
                success: function(res){
                    var top="",foot="",data=res.data;
                    if($.isEmptyObject(data) == false){
                        for (var k in data){
                            top+="<td>"+data[k]['size_name']+"</td>";
                            foot+="<td>"+data[k][type]+"</td>";
                        }
                    } else {
                        top+="<td>空</td>";
                        foot+="<td>空</td>";
                    }
                    var table="<table class='layui-table small-table'>";
                    table+="<tbody>";
                    table+="<tr class='top'>";
                    table+="<td>尺码</td>";
                    table+=top;
                    table+="</tr>";
                    table+="<tr class='foot'>";
                    switch (type) {
                        case 'order_count':
                            table+="<td>下单件数</td>";
                            break;
                        case 'shicai_count':
                            table+="<td>裁剪件数</td>";
                            break;
                    }
                    table+=foot;
                    table+="</tr>";
                    table+="</tbody>";
                    table+="</table>";
                    tip_index=layer.tips(table,"#showQuantityDetail-"+type+"-"+order_id+"",{tips:[3, '#fff'],area: ['250px', 'auto'],time:10000});
                    $("#showQuantityDetail-"+type+"-"+order_id+"").mouseleave(function(){
                        layer.close(tip_index);
                    });
                }
            });
        }

        // 设置回货时间
        var layerOverTime;
        $(document).on('click','.workshop-set-overtime',function(){
            var client_ordernum = $(this).attr('data-option');
            var chejianPlanOverTime = parseInt($(this).attr('data-chejian_plan_over_time'));
            date = chejianPlanOverTime > 0? layui.util.toDateString(chejianPlanOverTime *1000, 'yyyy-MM-dd') : '';
            var content = laytpl($('#overTimeTpl').html()).render({});
            layer.close(layerOverTime);
            layerOverTime = layer.open({
                type: 1
                ,shade: 0
                ,offset: '100px'
                ,anim: parseInt(Math.random()*(6+1),10)
                ,area: ['276px', '368px']
                ,skin:'layui-layer-molv'
                ,title:'预计完成时间'
                ,content: content
                ,success: function(){
                    laydate.render({
                        elem: '#overTimeControl'
                        ,position: 'static'
                        ,btns: false
                        ,value: date
                        ,mark: {'{:$today}':''}
                        ,change: function(value, date){ //监听日期被切换
                            $.ajax({
                                type: "POST",
                                url: "{:url('mp/OutNodeProgress/setHopeShipmentTime')}",
                                data: {
                                    client_ordernum:client_ordernum
                                    ,date_time:value
                                    ,field:'outgotail_return_time'
                                },
                                dataType:"json",
                                success: function(res){
                                    if (res.code == 1) {
                                        layer.msg(res.msg, {icon: 1});
                                        layer.close(layerOverTime);
                                    } else {
                                        layer.msg(res.msg, {icon: 2,anim: 6});
                                    }
                                }
                            });
                        }
                    });
                }
            });

        });
    });

    function return_goods_num_edit(obj) {
        var v1=parseInt($(obj).val());
        var v2=parseInt($(obj).attr('data-option'));
         $(obj).parent().parent().find('[name="sew_owe[]"]').val(v2-v1);
    }

    var factory_all = xmSelect.render({
        el: '#factory_all',
        name:'factory_all',
        autoRow: true,
        filterable: true,
        tree: {
            show: true,
            showFolderIcon: true,
            showLine: true,
            indent: 20,
            expandedKeys: [ -3 ],
        },
        toolbar: {
            show: true,
            list: ['ALL', 'REVERSE', 'CLEAR']
        },
        data: function(){
            return factoryAll;
        }
    })
</script>